<template>
  <div>
    <!-- 搜索 -->
     <div class="top-main">
    <el-form  class="top-form-fl stust" :model="queryParams" ref="queryRef" label-width="auto" :inline="true">
      <el-form-item label="箱号">
        <MultipleBoxNumbersDialog v-model="queryParams.refNos" />
      </el-form-item>
      <el-form-item label="业务编号" prop="businessNo">
        <el-input v-model.trim="queryParams.businessNo" clearable placeholder="请输入业务编号"/>
      </el-form-item>
      <el-form-item label="提箱日期" v-if="queryParams.refType!=20">
        <el-date-picker v-model="dateObj.beginPlanPickupDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="应还箱日期" v-if="queryParams.refType!=20">
        <el-date-picker v-model="dateObj.beginReturnDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="出售日期" v-if="queryParams.refType==20">
        <el-date-picker v-model="dateObj.beginSellDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker v-model="dateObj.beginCreateDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="提箱城市" prop="carryCityId">
        <city-select v-model="queryParams.carryCityId" :selectCity="queryParams.carryCityId" @cityId="startCityId"
          style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item label="还箱城市" prop="returnCityId">
        <city-select v-model="queryParams.returnCityId" :selectCity="queryParams.returnCityId" @cityId="backCityId"
          style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item label="集装箱公司" prop="companyName">
        <el-input v-model.trim="queryParams.companyName" placeholder="请输入集装箱公司" />
      </el-form-item>
      <el-form-item label="客户" prop="agentName">
        <el-input v-model.trim="queryParams.agentName" placeholder="请输入客户" />
      </el-form-item>
    </el-form>
      <div class="top-from-fr">
          <el-button class="top-Search" @click="getFilterData" type="primary">搜索</el-button>
          <el-button class="top-Refresh" @click="resetFrome">重置</el-button>
        </div>   
    </div>
    <div style="display: flex; justify-content: flex-end;">
        <el-button type="primary" @click="addTap" style="margin-right: 20px;">新增业务费用</el-button>

      <el-dropdown>
      <el-button :icon="Grid">
        批量操作
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <!-- <el-dropdown-item @click="batchTap(1)">导入</el-dropdown-item> -->
          <el-dropdown-item @click="batchTap(2)">编辑</el-dropdown-item>
          <el-dropdown-item @click="batchTap(3)">删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
      </div>
      <div class="main-cent">
      <!-- tabs切换 -->
      <el-tabs v-model="queryParams.refType" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane v-for="item in tabsList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
      </el-tabs>
    <Table ref="tableRef" v-bind="tableData" @editPermissions="editPermissions" @examine="examine" @examineMode="examineMode" @deleteBox="deleteBox"
      @pageChange="pageChange">
    </Table>
  </div>
      <!-- 添加业务费弹窗 -->
    <addModalForm ref="addModalMormRef" @addMode="getFilterData"></addModalForm>
    <!-- 编辑业务费弹窗 -->
    <updateModalForm ref="updateModalMormRef" @updateMode="getFilterData"></updateModalForm>
    <!-- 批量编辑 -->
    <feetModalForm ref="feetModalMormRef"  @feetMode="getFilterData"></feetModalForm>
    <!-- 查看单票出租利润 -->
    <examineModalForm ref="examineModalMormRef"></examineModalForm>
    <!-- 批量导入 -->
    <el-dialog v-model="dialogPitchUploadVisible" style="width: 400px;">
      <template #header>
        <div class="header-title">批量导入</div>
      </template>
      <div style="display: flex; justify-content: flex-end;margin-bottom: 20px;align-items: center;color: #2158F3;">
        <el-icon><Download /></el-icon>
        <a href="#">下载模板</a>
      </div>
      <uploadFile ref="uploadFileRef" :type="'excel_operating'"></uploadFile>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onActivated,computed } from 'vue'
import Table from '@/components/table'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus,Grid } from '@element-plus/icons-vue'
import { getTableList, deleteIds } from '@/api/financial/operating'
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog.vue'
import citySelect from '@/components/citySelect'
import updateModalForm from '@/views/financialManage/operating/components/updateModalForm.vue'
import feetModalForm from '@/views/financialManage/operating/components/feetModalForm.vue'
import examineModalForm from '@/views/financialManage/operating/components/examineModalForm.vue'
import addModalForm from '@/views/financialManage/operating/components/addModalForm.vue'
import uploadFile from '@/components/upload/index.vue'

// 城市id回写
const startCityId = (id: string) => {
  queryParams.value.carryCityId = id
}
const backCityId = (id: string) => {
  queryParams.value.returnCityId = id
}

const updateModalMormRef = ref()
const feetModalMormRef = ref()
const addModalMormRef=ref()
const examineModalMormRef = ref()
const queryRef=ref(null)
const dialogPitchUploadVisible=ref(false) //导入弹框
const tabsList=ref([
{ label: '出租业务费', value: 5 },
// { label: '回调业务费', value: 10},
{ label: '出售业务费', value: 20}

])
const dateObj=ref({
  beginPlanPickupDate:null,
  beginReturnDate:null,
  beginCreateDate:null,
  beginSellDate:null
})
const data = reactive({
  queryParams: {
    refNos:'',
    refType:5,
    businessNo:'',
    beginPlanPickupDate:'',
    endPlanPickupDate:'',
    beginReturnDate:'',
    endReturnDate:'',
    beginCreateDate:'',
    endCreateDate:'',
    beginSellDate:'',
    endSellDate:'',
    companyName:'',
    agentName:'',
    carryCityId:'',
    returnCityId:'',
    pageNum: 1,
    pageSize: 10,
  },
});
const { queryParams } = toRefs(data);

onActivated(() => {
  getFilterData()
})
// 基础数据
const tableData = reactive({
  header: [
    { key: 'businessNo', colWidth: '200', title: '业务编号', type: '<aTwo>', command: 'examineMode', isCheck: true ,},
    { key: 'refNo', colWidth: '150', title: '箱号',type: '<a>', command: 'examine', isCheck: true },
    { key: 'boxType', colWidth: '70', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    { key: 'boxCondition', colWidth: '70', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货',20: '混提' }, isCheck: true },
    { key: 'boxUsagePeriod', colWidth: '70', title: '箱使期', type: 'add', after: '天', isCheck: true },
    { key: 'outDate', colWidth: '100', title: '提箱日期', type: 'date', isCheck: true ,},
    { key: 'shouldReturnDate', colWidth: '100', title: '应还箱日期', type: 'date', isCheck: true,},
    { key: 'returnDate', colWidth: '100', title: '实还箱日期', type: 'date', isCheck: true,},
    { key: 'sellDate', colWidth: '100', title: '出售日期', type: 'date', isCheck: false,},
    { key: 'carryCityName', key2: 'carryCountryName', colWidth: '100', title: '提箱城市', type: 'twoRow', isCheck: true },
    { key: 'returnCityName', key2: 'returnCountryName', colWidth: '100', title: '还箱城市', type: 'twoRow', isCheck: true },
    { key: 'billStatus', colWidth: '100', title: '状态', type: 'writeOffStatus', isCheck: true },
    { key: 'containerClassify', colWidth: '70', title: '箱源', type: 'filter', filter: { 5: '自有', 10: '代管', 15: '外调'}, isCheck: true },
    { key: 'receivableCnyAmount',key2: 'receivableUsdAmount', colWidth: '120', title: '应收金额', type: 'amount', isCheck: true },
    { key: 'payableCnyAmount',key2: 'payableUsdAmount', colWidth: '120', title: '应付金额', type: 'amount', isCheck: true },
    { key: 'companyName', colWidth: '200', title: '集装箱公司', type: 'companyName', isCheck: true },
    { key: 'agentName', colWidth: '200', title: '客户', type: 'text', isCheck: true },
    { key: 'createTime', colWidth: '100', title: '创建日期', type: 'date', isCheck: true },
    {
      key: 'operate',
      colWidth: '150',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          icon: 'Edit',
          command: 'editPermissions',
          content: '',
           isShow: (row: any) => {
            return row.billStatus==5;
          },
        },
        // {
        //   icon: 'Open',
        //   type: 0,  //企业用户 1  企业账号 0 
        //   status: "1",
        //   command: 'handleSwitch',
        //   content: '',
        // },
        {
          icon: 'Delete',
          command: 'deleteBox',
          content: '',
          isShow: (row: any) => {
            return row.billStatus==5;
          },
        }
      ]
    }
  ],
  data: [],
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 总条数
    loading: false,
    isRealName: false, // 是否已经实名认证
  }
})
const tableRef = ref({ multipleSelection: [] })
const selection = computed(() => {
  let ids: any[] = []
  tableRef.value.multipleSelection.map((item: any) => {
    ids.push(item.id)
  })
  return ids
})
//tabs切换 列表字段是否显示
const handleClick=()=>{
  tableRef.value.clearCheckAll()
  getFilterData()
  tableData.header.forEach((item)=>{
    if(queryParams.value.refType==20){
      if(item.key=='boxUsagePeriod'){
        item.isCheck=false
      }else if(item.key=='outDate'){
        item.isCheck=false

      }else if(item.key=='shouldReturnDate'){
        item.isCheck=false

      }else if(item.key=='returnDate'){
        item.isCheck=false

      }else if(item.key=='sellDate'){
        item.isCheck=true
      }
    }else{
      if(item.key=='boxUsagePeriod'){
        item.isCheck=true
      }else if(item.key=='outDate'){
        item.isCheck=true
      }else if(item.key=='shouldReturnDate'){
        item.isCheck=true
      }else if(item.key=='returnDate'){
        item.isCheck=true
      }else if(item.key=='sellDate'){
        item.isCheck=false
      }
    }
  })
  // tableData.header[0].refType=true
}
// 重置搜索数据
const resetFrome = () => {
  queryRef.value.resetFields()
  queryParams.value.refNos=''
  queryParams.value.carryCityId=''
  queryParams.value.returnCityId=''
  dateObj.value.beginPlanPickupDate=null
  dateObj.value.beginReturnDate=null
  dateObj.value.beginCreateDate=null
  dateObj.value.beginSellDate=null
  queryParams.value.beginPlanPickupDate=''
  queryParams.value.endPlanPickupDate=''
  queryParams.value.beginReturnDate=''
  queryParams.value.endReturnDate=''
  queryParams.value.beginCreateDate=''
  queryParams.value.endCreateDate=''
  queryParams.value.beginSellDate=''
  queryParams.value.endSellDate=''
  getFilterData()
}
// 搜索数据
const getFilterData = () => {
  if (dateObj.value.beginPlanPickupDate) {
    queryParams.value.beginPlanPickupDate = dateObj.value.beginPlanPickupDate[0]
    queryParams.value.endPlanPickupDate = dateObj.value.beginPlanPickupDate[1]
  }
  if (dateObj.value.beginReturnDate) {
    queryParams.value.beginReturnDate = dateObj.value.beginReturnDate[0]
    queryParams.value.endReturnDate = dateObj.value.beginReturnDate[1]
  }
  if (dateObj.value.beginCreateDate) {
    queryParams.value.beginCreateDate = dateObj.value.beginCreateDate[0]
    queryParams.value.endCreateDate = dateObj.value.beginCreateDate[1]
  }
  if (dateObj.value.beginSellDate) {
    queryParams.value.beginSellDate = dateObj.value.beginSellDate[0]
    queryParams.value.endSellDate = dateObj.value.beginSellDate[1]
  }
    let queryData=JSON.parse(JSON.stringify(queryParams.value))
  if(queryData.refNos && queryData.refNos!=''){
    queryData.refNos=queryParams.value.refNos.split(',')
  }else{
   delete queryData.refNos
  }
  getTableList(queryData).then(res => {
    tableData.data = res.data.list.sort((a, b) => a.sort - b.sort)
    tableData.config.total = res.data.total
    console.log(res)  
  })
 
}
//新增
const addTap=()=>{
  addModalMormRef.value.onShow()
}
// 编辑
const editPermissions = (row) => {
  updateModalMormRef.value.onShow(row.id,1)
}
// 查看
const examine = (row) => {
  updateModalMormRef.value.onShow(row.id,2)
}
// 查看单票利润
const examineMode = (row) => {
  examineModalMormRef.value.onShow(row.businessNo,row.refType)
}

// 批量操作
const batchTap= (type) => {
  //type  1导入  2编辑  3删除
  if(type==1){
    dialogPitchUploadVisible.value=true
  }else if(type==2){
    let row=selection.value
    if(row.length==0){
      ElMessage.warning('请选择编辑的数据');
        return false
    }
    feetModalMormRef.value.onShow(row,queryParams.value.refType)
  }else if(type==3){
    let row=selection.value
    if(row.length==0){
      ElMessage.warning('请选择删除的数据');
        return false
    }
    deleteBox(row)
  }
}
//删除操作
const deleteBox = (row) => {
  ElMessageBox.confirm(
    '确认删除业务费吗？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let data=[]
      if(row?.id){
        //单独删除
        data.push(row.id)
      }else{
        //批量
        data=row
      }
      deleteIds(data).then((res) => {
        ElMessage.success('删除成功')
        getFilterData()
      })
    })
}
// // 翻页控制
const pageChange = (val) => {
  queryParams.value.pageNum=val.pageNum
  queryParams.value.pageSize=val.pageSize
  getFilterData()
}

</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
</style>